<template>
  <div class="lbt">
    <div class="swiper">
      <ul class="swiper-wrapper">
        <li class="swiper-slide" v-for="(item, index) in list" :key="index">
          <img :src="item.imgUrl" alt="" />
        </li>
      </ul>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-prev hide"></div>
      <div class="swiper-button-next hide"></div>
    </div>
  </div>
</template>
<script>
import {Banner} from "../../request/api.js";
export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    swiperInit() {
      new Swiper(".swiper", {
        effect: "fade",
        keyboard: true,
        loop: true,
        autoplay: {
          pauseOnMouseEnter: true,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    },
    async banner() {
      var res = await Banner();
      if (res.data.msg == "操作成功") {
        this.list = res.data.result;
        this.$nextTick(() => {
          this.swiperInit();
        });
      }
    },
  },

  mounted() {
    this.banner();
    // this.axios
    //   .get("https://apipc-xiaotuxian-front.itheima.net/home/banner")
    //   .then((res) => {
    //     if (res.data.msg == "操作成功") {
    //       this.list = res.data.result;
    //       this.$nextTick(() => {
    //         this.swiperInit();
    //       });
    //     }
    //   });
  },
};
</script>
<style scoped>
/* .swiper .hide {
  opacity: 0 !important;
} */

.swiper-button-next,
.swiper-button-prev {
  transition: opacity 0.5s !important;
}
.swiper {
  width: 1240px;
  height: 500px;
}

.swiper-slide img {
  width: 100%;
}

.swiper-pagination {
  left: 70px !important;
  bottom: 20px !important;
}

/* .swiper-pagination-bullet-active {
  background: #fff !important;
} */
/* scss中::v-deep 样式穿透， 突破scoped的限制,修改其他元素的样式css中 选择器>>>选择器 */
.lbt >>> .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #fff;
}

.swiper-button-prev {
  left: 250px !important;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.5);
  margin-left: 10px;
}

.swiper-button-prev::after {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: #fff;
  margin-left: 8px;
}

.swiper-button-next {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.5);
}

.swiper-button-next::after {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: #fff;
  margin-left: 8px;
}
</style>